<template>
  <div class="app-main-content profile-page">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-menu :default-active="active" mode="vertical" @select="onSelect">
          <el-menu-item v-for="(item, index) in tabs" :key="index" :index="index.toString()">{{ item.label }}</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" class="right-box">
        <component :is="tabs[active].component" :item="tabs[active]" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import basic from './components/basic'
  import password from './components/password'
  export default {
    name: 'Profile',
    components: {
      basic, password
    },
    data() {
      return {
        active: '0',
        tabPosition: 'left',
        tabs: [{
          label: '基本设置',
          name: 'basic',
          component: basic
        }, {
          label: '密码设置',
          name: 'password',
          component: password
        }]
      }
    },
    methods: {
      onSelect(index, indexPath) {
        this.active = index
      }
    }
  }
</script>
<style lang="scss">
  .profile-page{
    .title{
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 30px;
    }
    .basic-page{
      margin-left: 30px;
    }
    .form{
      width: 500px;
    }
    .el-menu-item.is-active{
      border-right: 3px solid #1890ff;
    }
    .el-menu{
      border-right: 0;
    }
    .right-box{
      border-left: 1px solid #e6e6e6;
    }
    .el-col{
      padding-right: 0 !important;
      padding-left: 20px;
    }
  }
</style>
